import { Component } from '@angular/core';

import { fadeInAnimation } from '../_animations/index';
import {SingalAnimate} from "../_animations/animate";
import {animate, query, stagger, state, style, transition, trigger} from "@angular/animations";

@Component({
    moduleId: module.id.toString(),

    styles: [`
      .toggle-container {
        background-color:white;
        border:10px solid black;
        width:200px;
        height: 400px;
        text-align:center;
        line-height:100px;
        font-size:50px;
        box-sizing:border-box;
        overflow:hidden;
      }
    `],
    templateUrl: 'home.component.html',
    animations: [trigger(
      'openClose',
      [
        state('collapsed, void', style({height: '0px', color: 'red', borderColor: 'red'})),
        state('expanded', style({height: '*', borderColor: 'green', color: 'green'})),
        transition(
          'collapsed <=> expanded', [animate(5000, style({height: '250px'})), animate(8000)])
      ]),
      trigger('queryAnimation', [
        transition('* => goAnimate',[
          query('h1', style({ opacity: 0 })),
          query('.content', style({ opacity: 0 })),

          query('h1', animate(1000, style({ opacity: 1 }))),
          query('.content', animate(1000, style({ opacity: 1 })))
        ])
      ])
    ],

})

export class HomeComponent {
  exp = '';
  stateExpression: string;

  constructor() { this.collapse(); this.exp = 'goAnimate';}
  expand() { this.stateExpression = 'expanded'; }
  collapse() { this.stateExpression = 'collapsed'; }

}
